<template>
  <el-drawer :visible.sync="visible" :title="title" :modal-append-to-body="true" :append-to-body="true"
    :destroy-on-close="false" :modal="true" :wrapperClosable="false" custom-class="form-drawer" size="450px"
    @closed="closed">

    <div class="form-drawer__content">
      <el-form ref="formData" :model="formData" :rules="rules" style="padding: 20px;">
        <el-form-item label-width="100px" label="角色">
          <template>
            <el-select v-model="userRoles" multiple clearable filterable disabled style="width: 100%;">
              <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label-width="100px" label="账号" prop="username">
          <el-input v-model="formData.username" placeholder="请输入账号" autocomplete="off" />
        </el-form-item>
        <el-form-item label-width="100px" label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名" autocomplete="off" />
        </el-form-item>
        <el-form-item label-width="100px" label="联系电话" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入电话" autocomplete="off" />
        </el-form-item>
        <el-form-item label-width="100px" label="所属单位" prop="orgName">
          <el-input ref="orgName" v-model="formData.orgName" placeholder="请输入所属单位" name="orgName" type="text"
            tabindex="1" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div class="form-drawer__footer">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </el-drawer>
  <!-- <div class="info-dialog">
    <el-dialog :visible.sync="visible" :title="title" :modal-append-to-body="true" :append-to-body="true"
      :destroy-on-close="false" :modal="true" :close-on-click-modal="false" top="10vh" width="550px" @closed="closed">

    </el-dialog>
  </div> -->
</template>

<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  import {
    saveUser,
    getUserDeptIdsById,
    getUserRoleIdsById
  } from '@/api/system/user'

  import {
    getDeptOptionsTree
  } from '@/api/system/dept'

  import {
    getRoleOptions
  } from '@/api/system/role'

  export default {
    name: 'InfoDialog',
    components: {
      Treeselect
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {

    },
    watch: {
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData.id = value.data.id || ''
            this.formData.username = value.data.username || ''
            this.formData.name = value.data.name || ''
            this.formData.phone = value.data.phone || ''
            this.formData.orgName = value.data.orgName || ''
          } else {
            this.formData.id = ''
            this.formData.username = ''
            this.formData.name = ''
            this.formData.phone = ''
            this.formData.orgName = ''
          }
          if (value.type) {
            this.type = value.type
            if (value.type === '0') {
              this.title = '新增'
            }
            if (value.type === '1') {
              this.title = '编辑'
            }
          }
        },
        immediate: true,
        deep: false
      }
    },
    data() {
      return {
        visible: false,
        title: '',
        loading: false,
        formData: {
          id: '',
          username: '',
          name: '',
          phone: '',
          orgName: '',
        },
        userDepts: null,
        deptOptions: [],
        userRoles: [],
        roleOptions: [],
        rules: {
          name: [{
              required: true,
              message: '请输入姓名或昵称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ],
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 50,
              message: '长度在 2 到 50 个字符',
              trigger: 'blur'
            }
          ],
          orgName: [{
              required: true,
              message: '请输入所属单位名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 50,
              message: '长度在 2 到 50 个字符',
              trigger: 'blur'
            }
          ],
          phone: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          }, {
            pattern: /^[1]([3-9])[0-9]{9}$/,
            message: '请正确输入11位手机号码',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      // this.getDeptOptionsTree();
      this.getRoleOptions();
    },
    methods: {
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      getDeptOptionsTree() {
        getDeptOptionsTree().then(response => {
            if (200 == response.code) {
              this.deptOptions = response.result;
              this.getUserDeptIdsById();
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {})
      },
      getUserDeptIdsById() {
        getUserDeptIdsById({
            userId: this.formData.id
          }).then(response => {
            if (200 == response.code) {
              this.userDepts = response.result;
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {})
      },
      getRoleOptions() {
        getRoleOptions().then(response => {
            if (200 == response.code) {
              this.roleOptions = response.result;
              if (this.type === '1') {
                this.getUserRoleIdsById();
              } else {
                if (this.roleOptions) {
                  this.roleOptions.map((item) => {
                    if ('customer' === item.code) {
                     this.userRoles.push(item.id)
                    }
                  })
                }
              }
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {})
      },
      getUserRoleIdsById() {
        getUserRoleIdsById({
            userId: this.formData.id
          }).then(response => {
            if (200 == response.code) {
              this.userRoles = response.result;
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {})
      },
      submitForm: function() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            saveUser({
                user: this.formData,
                deptIds: this.userDepts != null && this.userDepts != '' && this.userDepts != undefined ? this
                  .userDepts.join() : '',
                roleIds: this.userRoles != null && this.userRoles != '' && this.userRoles != undefined ? this
                  .userRoles.join() : ''
              }).then(rsp => {
                this.$message({
                  type: 'success',
                  message: this.type === '1' ? '修改成功!' : '添加成功!'
                })
                this.closed()
              }).catch(err => {
                console.log(err);
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }
</script>

<style scoped>
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #aaaaaa;
    color: #333333;
  }

  /deep/ .el-dialog__body {
    padding: 0px 0px;
  }

   /deep/ .el-dialog__footer {
    padding: 10px;
    padding-top: 10px;
    border-top: 1px solid #aaaaaa;
  }

   /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

   /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

   /deep/ .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

   /deep/ .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
